<template>
  <div style="margin-top: 20px;width: 300px;margin-left: 20px">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8"/>
    <div class="fileDiv">

      <el-form ref="form" enctype="multipart/form-data">
        <el-form-item enctype="multipart/form-data">
            <input type="file" name="file" ref="myfile" class="fileInput"/>
            <el-button type="primary" round="true" @click="upload" size="medium" class="fileButton">提交</el-button>
        </el-form-item>
      </el-form>

    </div>
    <vue-qr :text="this.fileName" :size="250" colorDark="#4169E1" colorLight="#fff" class="qr"></vue-qr>

  </div>

</template>

<script>
export default {
  name: "File",
  data() {
    return {
      id: 0,
      file:new FormData(),
      fileName: ""
    };
  },
  methods: {


    upload() {
      let myfile = this.$refs.myfile;
      let files = myfile.files;
      let file = files[0];
      var formData = new FormData();
      formData.append("file", file);
      this.postRequest('/more/upload', formData).then(resp => {
        if (resp?.code == 200) {
          this.$message.success("文件上传成功");
          this.fileName = "http://www.xhxlcloud.com:8080/download/" + resp.data;
        }
      })
    }
  }
};

</script>

<style>

.fileDiv {
  height: 400px;
  width: 600px;
  background-image: url("../../assets/file.jpg");
  background-size: cover;
  padding-top: 200px;
  padding-left: 300px;
}

.fileInput{
  display: block;
  margin-bottom: 50px;

}

.fileButton{
  display: block;
}


.qr {
  margin-left: 300px;
}
</style>
